<template>
	<view class="content">
		<view class="amount">
			<view class="bottom">
				<view class="col">
					<text class="label">总金额(元)</text>
					<text class="value">{{$util.thousands(accountInfor.total)}}</text>
				</view>
				<view class="col">
					<text class="label">可用金额</text>
					<text class="value">{{$util.thousands(accountInfor.balance)}}</text>
				</view>
				<view class="col">
					<text class="label">冻结金额</text>
					<text class="value">{{$util.thousands(accountInfor.frozenBalance)}}</text>
				</view>
				<view class="col">
					<text class="label">提现待审核金额</text>
					<text class="value">{{$util.thousands(accountInfor.withdrawBalance)}}</text>
				</view>
			</view>
			<view class="btns">
				<button class="light-btn btn" @click="navTo('/pages/account/withdraw')">提现</button>
				<button class="light-btn btn" @click="navTo('/pages/account/fundingRecords')">账单</button>
			</view>
		</view>
		<view class="list">
			<u-cell url="/pages/account/bank" :border="false" :customStyle="{borderBottom: '1rpx solid #232639'}">
				<text slot="title" class="title">绑定银行卡</text>
				<u-icon name="arrow-right" slot="value" color="#ffffff"></u-icon>
			</u-cell>
			<u-cell :border="false" :customStyle="{borderBottom: '1rpx solid #232639'}">
				<text slot="title" class="title">第三方支付</text>
				<u-icon name="arrow-right" slot="value" color="#ffffff"></u-icon>
			</u-cell>
		</view>
	</view>
</template>

<script>
	import {mapActions} from 'vuex';
	export default {
		components: {
		},
		data() {
			return {
				accountInfor:{}
			}
		},
		onLoad() {
			this._queryAccountList();
		},
		methods: {
			...mapActions('user',['queryAccountList']),
			_queryAccountList(){
				this.queryAccountList().then(res=>{
					console.log(res);
					this.accountInfor = res.data;
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		background-color: #0a0a22;
		padding: 20rpx 30rpx;
		.amount{
			padding: 30rpx 20rpx;
			margin-bottom: 20rpx;
			background-color: #484b5e;
			border-radius: 10rpx;
			.btns{
				display: flex;
				justify-content: space-between;
				padding: 30rpx 0 10rpx 0;
				.btn{
					height: 60rpx;
					line-height: 60rpx;
				}
			}
			.bottom{
				display: flex;
				flex-wrap: wrap;
				padding: 20rpx 0 0 0;
				.col{
					width: 50%;
					display: flex;
					flex-direction: column;
					align-items: center;
					margin-bottom: 50rpx;
					.label{
						padding-bottom: 10rpx;
						font-size: 26rpx;
					}
					.value{
						font-size: 32rpx;
						font-weight: bold;
						color: #ff9900;
					}
				}
			}
		}
		.list{
			.title{
				color: #ffffff;
			}
		}
	}

</style>
